<template>
  <div class="box">
    <!-- 头部 -->
    <div v-if="ruser" class="header" @click="$router.push('/editing')">
      <img v-if="ruser.head_img" :src="$axios.defaults.baseURL+ ruser.head_img" class="us_img" />
      <img v-else src="@/assets/logo.png" class="us_img" />
      <span class="iconfont iconxingbienan" v-if="ruser.gender==1"></span>
      <span class="iconfont iconxingbienv" v-else></span>
      <div class="hbody">
        <div class="nickname">{{ruser.nickname}}</div>
        <div class="data">{{ruser.create_date.split("T")[0]}}</div>
      </div>
      <span class="iconfont iconjiantou1"></span>
    </div>
    <!-- 条形组件 -->
    <Strip val="我的关注" text="关注的用户" @barClick="$router.push('./concerns')" />
    <Strip val="我的跟帖" text="跟帖/回复" @barClick="navbtn(回复)" />
    <Strip val="我的收藏" text="文章/视频" @barClick="navbtn(视频)" />
    <Strip val="设置" @barClick="navbtn(设置)" />
    <Strip val="退出登录" text="切换用户" @barClick="exit" />
  </div>
</template>

<script>
import Strip from "@/components/Strip";

export default {
  components: {
    Strip
  },
  data() {
    return {
      ruser: null
    };
  },
  mounted() {
    this.$axios({
      url: "user/" + localStorage.getItem("id"),
      method: "get",
      headers: { Authorization: "Bearer " + localStorage.getItem("token") }
    }).then(res => {
      const { message, data } = res.data;
      if (message == "获取成功") {
        this.ruser = data;
        console.log(this.ruser);
      }
    });
  },
  methods: {
    exit() {
      localStorage.removeItem("token");
      localStorage.removeItem("id");
      this.$router.replace("/login");
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  .header {
    display: flex;
    height: 33.333vw;
    padding: 0vw 4.167vw 0vw 5.556vw;
    align-items: center;
    border-bottom: 1.389vw solid #cccccc;
    .us_img {
      width: 16.667vw;
      height: 16.667vw;
    }
    .iconjiantou1 {
      // margin-top: 4.167vw;
      font-size: 4.167vw;
      color: #cccc;
    }
    .hbody {
      flex: 1;
      line-height: -1.389vw;
    }
    .data {
      color: #bbbbbb;
      font-weight: 600;
      margin-left: -5.556vw;
      margin-top: 1.389vw;
    }
    .nickname {
      color: beige;
    }
    .iconxingbienan,
    .iconxingbienv {
      margin: 0 1.389vw 5.556vw 4.167vw;
      font-size: 4.167vw;
      color: cornflowerblue;
    }
    .iconxingbienv {
      color: pink;
    }
  }
}
</style>